//安环管理系统/环保指标报警管理/历史报警
import React, { Component } from "react";
import { connect } from "dva";
import {
    Card,
    DatePicker,
    Button,
    Icon,
    Pagination,
    Table,
    Dropdown,
    Menu,
    Select,
    Tag
} from "antd";
import style from "./IndexHistory.less";
import { IndexHistoryQuery } from "../../../services/redmoe";
import PublicService from "../../../services/PublicService";
import MyIcon from "../../../components/common/MyIcon";
import moment from "moment";
const Option = Select.Option;
const { MonthPicker, RangePicker } = DatePicker;
class IndexHistory extends Component {
    state = {
        page: 1,
        rows: 10,
        endDate: "",
        startDate: "",
        RangePicker: null,
        tableLoading: false,
        Kind: "",
        rowCount: null,
        columns: [
            {
                title: "序号",
                dataIndex: "num",
                key: "num",
                align: "center"
            },
            {
                title: "环保排放指标名称",
                dataIndex: "typeName",
                key: "typeName",
                align: "center"
            },
            {
                title: "报警时间",
                dataIndex: "takeTime",
                key: "takeTime",
                align: "center"
            },
            {
                title: "小时均值(mg/m³)",
                dataIndex: "hourValue",
                key: "hourValue",
                align: "center"
            },
            {
                title: "排放限值(mg/m³)",
                dataIndex: "maxHigh",
                key: "maxHigh",
                align: "center"
            },
            {
                title: "操作",
                dataIndex: "caozuo",
                key: "caozuo",
                align: "center",
                render: (text, record, index) => (
                    <Tag
                        size="small"
                        color="blue"
                        onClick={this.save.bind(this, record)}
                    >
                        详情
                    </Tag>
                )
            }
        ],
        data: []
    };

    componentDidMount() {
        let data = {
            page: this.state.page,
            rows: this.state.rows,
            endDateStr: "",
            startDateStr: "",
            typeCode: ""
        };
        IndexHistoryQuery({ ...data }).then(data => {
            console.log(data);
            data.data.ret.items.forEach(item => {
                item.IndexDayTime = item.takeTime;
                item.takeTime = moment(item.takeTime).format(
                    "YYYY-MM-DD HH:00"
                );
            });

            this.setState({
                data: data.data.ret.items,
                rowCount: data.data.ret.rowCount
            });
        });
    }

    //点击详情事件
    save = record => {
        console.log(record);
        this.props.history.push(
            "/controlSubject/IndexTransfinite/IndexDayTrend"
        );
        PublicService.setCookie("IndexDayKind", record.typeCode);
        PublicService.setCookie("IndexDayTime", record.IndexDayTime);
        PublicService.setCookie("IndexDayName", record.typeName);
        PublicService.setCookie("IndexDayhourValue", record.hourValue);
        PublicService.setCookie("IndexDaymaxHigh", record.maxHigh);
    };

    //导出按钮 //不全
    derive = e => {
        if (e.key == "item_0") {
            //导出本页
            let data = {
                page: this.state.page,
                rows: this.state.rows,
                isAll: false
            };
            window.location.href = `/hh-management-web/gnhj/environmentalindicatalarm/historyAlarmExcelExport?page=${
                data.page
            }&rows=${data.rows}&isAll=${data.isAll}&startDateStr=${
                this.state.startDate == ""
                    ? ""
                    : `${this.state.startDate} 00:00:00`
            }&endDateStr=${
                this.state.endDate == "" ? "" : `${this.state.endDate} 00:00:00`
            }&typeCode=${this.state.Kind}`;
        } else {
            //导出全部
            let data = {
                page: this.state.page,
                rows: this.state.rows,
                isAll: true
            };
            window.location.href = `/hh-management-web/gnhj/environmentalindicatalarm/historyAlarmExcelExport?page=${
                data.page
            }&rows=${data.rows}&isAll=${data.isAll}&startDateStr=${
                this.state.startDate == ""
                    ? ""
                    : `${this.state.startDate} 00:00:00`
            }&endDateStr=${
                this.state.endDate == "" ? "" : `${this.state.endDate} 00:00:00`
            }&typeCode=${this.state.Kind}`;
        }
    };

    //分页器事件
    onShowSizeChange = (page, rows) => {
        this.setState({
            page: page,
            rows: rows
        });
        setTimeout(() => {
            this.query();
        });
    };

    //分页器分页事件
    Pagination = (page, pageSize) => {
        this.setState({
            page: page,
            rows: pageSize
        });
        setTimeout(() => {
            this.query();
        });
    };
    //下拉选择器事件
    handleChange = value => {
        console.log(`selected ${value}`);
        this.setState({
            Kind: value
        });
    };

    //日期选择事件
    RangePicker = (data, datastring) => {
        console.log(data);
        console.log(datastring[0]);
        this.setState({
            startDate: datastring[0],
            endDate: datastring[1],
            RangePicker: [data[0], data[1]]
        });
    };
    //查询按钮事件
    query = () => {
        this.setState({
            tableLoading: true,
            data: []
        });

        setTimeout(() => {
            let data = {
                endDateStr:
                    this.state.endDate == "" ? "" : `${this.state.endDate}`,
                startDateStr:
                    this.state.startDate == "" ? "" : `${this.state.startDate}`,
                page: this.state.page,
                rows: this.state.rows,
                typeCode: this.state.Kind
            };
            IndexHistoryQuery({ ...data }).then(data => {
                console.log(data);
                if (data.data.rc == 0) {
                    data.data.ret.items.forEach(item => {
                        item.IndexDayTime = item.takeTime;
                        item.takeTime = moment(item.takeTime).format(
                            "YYYY-MM-DD HH:00"
                        );
                    });
                    this.setState({
                        data: data.data.ret.items,
                        tableLoading: false
                    });
                }
            });
        }, 500);
    };

    //重置按钮事件
    reset = () => {
        this.setState({
            RangePicker: null,
            endDate: "",
            startDate: "",
            Kind: "",
            page: 1
        });

        let data = {
            page: 1,
            rows: 10,
            endDateStr: "",
            startDateStr: "",
            typeCode: ""
        };
        IndexHistoryQuery({ ...data }).then(data => {
            console.log(data);
            data.data.ret.items.forEach(item => {
                item.IndexDayTime = item.takeTime;
                item.takeTime = moment(item.takeTime).format(
                    "YYYY-MM-DD HH:00"
                );
            });

            this.setState({
                data: data.data.ret.items
            });
        });
    };
    render() {
        const menu = (
            <Menu>
                <Menu.Item onClick={this.derive}>本页</Menu.Item>
                <Menu.Item onClick={this.derive}>全部</Menu.Item>
            </Menu>
        );

        return (
            <div>
                <Card className={style.CardTop}>
                    <div className={style.Top}>
                        指标名称:
                        <Select
                            style={{ width: 120, marginRight: 10 }}
                            onChange={this.handleChange}
                            size="small"
                            defaultValue={"全部"}
                            value={this.state.Kind}
                        >
                            <Option value="">全部</Option>
                            <Option value="co">一氧化碳</Option>
                            <Option value="cod">COD</Option>
                            <Option value="hcl">氯化氢</Option>
                            <Option value="nox">氮氧化物</Option>
                            <Option value="ph">pH</Option>
                            <Option value="pl">颗粒物</Option>
                        </Select>
                        查询时间:{" "}
                        <RangePicker
                            showTime
                            format="YYYY-MM-DD HH:mm:ss"
                            value={this.state.RangePicker}
                            allowClear={true}
                            size="small"
                            onChange={this.RangePicker.bind(this.RangePicker)}
                            placeholder={["开始时间", "结束时间"]}
                            style={{ marginRight: 10 }}
                        />
                        <Button
                            type="primary"
                            className={style.primary}
                            size="small"
                            style={{ marginRight: 10 }}
                            onClick={this.query}
                        >
                            查询
                        </Button>
                        <Button
                            className={style.reset}
                            onClick={this.reset}
                            size="small"
                        >
                            重置
                        </Button>
                    </div>
                </Card>

                <Card
                    className={style.CardBottom}
                    bodyStyle={{ paddingTop: "0.5vh", paddingBottom: "0" }}
                >
                    <span className={style.click_span} type="primary">
                        <MyIcon
                            type="icon-webicon320"
                            className={style.MyIcon_webicon320}
                        />
                        <Dropdown overlay={menu}>
                            <span className="ant-dropdown-link">
                                导出 <Icon type="down" />
                            </span>
                        </Dropdown>
                    </span>

                    <div className={style.myTable}>
                        <Table
                            ref="table"
                            loading={this.state.tableLoading}
                            columns={this.state.columns}
                            dataSource={PublicService.transformArrayData(
                                this.state.data,
                                true,
                                true
                            )}
                            align="center"
                            className={style.Table}
                            bordered={true}
                            pagination={false}
                            size="small"
                        />
                    </div>
                    <Pagination
                        showSizeChanger
                        onShowSizeChange={this.onShowSizeChange}
                        showQuickJumper
                        defaultCurrent={1}
                        total={this.state.rowCount}
                        onChange={this.Pagination}
                        className={style.Pagination}
                        size="small"
                        current={this.state.page}
                    />
                </Card>
            </div>
        );
    }
}

export default connect()(IndexHistory);
